<template>

	<view>

		<view class="fixed l-0 b-0 flex tabbar" :style="{
			width: _width + 'px',
			height: _totalBarHeight + 'px',
			transform: `translateY(${props.bottom}rpx)`,
			zIndex: props.zIndex
		}">
			<!-- 			@click="emits('click', $event)"    -->
			<view class="relative" style="top: 15px">
				<zh-sheet :blur="_blur" :color="props.color" parenClass="relative" class="relative"
					:followTheme="props.followTheme" :dark="props.dark" :round="props.round" :shadow="props.shadow"
					:outlined="props.outlined" :border="0" borderDirection="top" :text="props.text" :transprent="false"
					:linear="props.linear" :linearDeep="props.linearDeep" :margin="[0, 0]" :padding="[0, 0]"
					:height="_BarHeight" :width="_width" unit="px"></zh-sheet>
			</view>
			<view class="absolute flex flex-col l-0" :style="{ width: _width + 'px', height: _totalBarHeight + 'px' }">
				<view class="relative barcont flex flex-row flex-row-top-center flex-around flex-1"
					:style="{ width: _width + 'px' }">
					<slot></slot>
				</view>
			</view>
		</view>
		<view v-if="_place" :style="{
			height: _totalBarHeight + 'px',
		}"></view>
	</view>
</template>

<script lang="ts" setup>
	/**
 * 底部导航栏
 * @description 内部只能放置,zh-tabbar-item
 */
	import { custom_props } from '@/tool/lib/minxs'
	import { getCurrentInstance, computed, Ref, ref, provide, inject, onUpdated, onMounted, onUnmounted, nextTick, watch, PropType } from 'vue'
	import systemConfigStore from '@/store/modules/systemConfigStore';
	const store = systemConfigStore();
	const emits = defineEmits(['change', 'update:active'])
	const props = defineProps({
		...custom_props,
		transprent: {
			type: [Boolean],
			default: false
		},
		color: {
			type: [String],
			default: 'white'
		},
		text: {
			type: [Boolean],
			default: false
		},
		round: {
			type: [Number],
			default: 0
		},
		shadow: {
			type: [Number],
			default: 0
		},
		//如果为0取当前窗口宽度。
		width: {
			type: [Number],
			default: 0
		},
		//底部偏移
		bottom: {
			type: [Number],
			default: 0
		},
		//是否显示安全区域
		showSafe: {
			type: [Boolean],
			default: false
		},
		//动态激活项的索引-1表示不激活任何项。
		active: {
			type: Number,
			default: -1
		},
		//是否自动选中。如果禁用，则用户通过active来切换选中值，否则，点击项目时自动选中。
		autoSelect: {
			type: Boolean,
			default: true
		},
		/** 在nvue上没有用处，请自行放到最尾部的地方。 */
		zIndex: {
			type: [Number],
			default: 200
		},
		/**是否占位，底部填充空白view */
		place: {
			type: Boolean,
			default: false
		},
	})
	let sys = uni.getSystemInfoSync()
	const _width = computed(() => uni.upx2px(props.width) || sys?.windowWidth || 750)
	const _blur = computed(() => props.blur)
	const _place = computed(() => props.place)
	const _activeUrl = ref('')
	const _activeUid = ref('')
	const zhTabbarId = 'zhTabbarId'
	const _cachlist : Ref<Array<string | number>> = ref([])
	const _showSafe = ref(props.showSafe)
	const _activeIndex = ref(props.active)
	const win_bottom = sys?.safeAreaInsets?.bottom ?? 0
	if (win_bottom > 0) {
		_showSafe.value = true
	}

	const _totalBarHeight = computed(() => {
		if (_showSafe.value) return 90
		return 75
	})
	const _BarHeight = computed(() => {
		if (_showSafe.value) return 75
		return 60
	})
	function setNowurl(url : string, nowuid : number) {
		_activeUrl.value = url
		_activeUid.value = String(nowuid)
	}
	function pushKey(uid : number) {
		_cachlist.value = [...new Set([..._cachlist.value, uid])]
	}
	function delKey(uid : number) {
		_cachlist.value = _cachlist.value.filter((el) => el != uid)
	}
	defineExpose({ zhTabbarId, setNowurl, pushKey, delKey })
	provide(
		'zhTabbarUrl',
		computed(() => _activeUrl.value)
	)
	provide(
		'zhTabbarUid',
		computed(() => _activeUid.value)
	)
	provide(
		'zhTabbarWidth',
		computed(() => Math.ceil(_width / _cachlist.value.length))
	)
	provide(
		'zhTabbarItemList',
		computed(() => _cachlist.value)
	)
	provide(
		'zhTabbarItemActive',
		computed(() => _activeIndex.value)
	)
	provide('zhTabbarIt', _showSafe.value)
	provide(
		'zhTabbarItemAutoSelect',
		computed(() => props.autoSelect)
	)
	watch(
		() => props.active,
		() => {
			if (props.active == _activeIndex.value) return
			_activeIndex.value = props.active
		}
	)
	watch(_activeIndex, () => {
		emits('change', _activeIndex.value)
		emits('update:active', _activeIndex.value)
	})
</script>

<style>
	/* #ifdef APP-NVUE */
	.barcont {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.tabbar {}

	/* #endif */
	/* #ifndef APP-NVUE */
	.barcont {
		display: flex;
		flex-direction: row !important;
		justify-content: space-around !important;
		align-items: flex-start;
	}

	/* #endif */
</style>